<template>
  <div id="recentSearch">
    <div id="wordCloud">
      <a v-for="hotword in hotWords" @click="hot_click(hotword,$event)">{{hotword}}</a>
    </div>
    <div id="wordCloud-mobile">
      <a v-for="(hotword,index) in hotWords" @click="hot_click(hotword,$event)" v-if="index < 15">{{hotword}}</a>
    </div>
  </div>
</template>

<script>
import { wordCloud } from './miaov.js'

export default {
  name: "recentSearch",
  data () {
    return {
      hotWords:['asdf','asdf']
    }
  },
  methods:{
    initStyle:function () {
      $('#searchInput').removeClass('search-up')
      $('.logo').removeClass('logo-up')
      $('body').removeClass('change-bg')
      $("#footer").addClass("home-footer");
      $('.mask').hide()
      $('.genre p').removeClass('active')
      $('.start-search').show()
      $('.start-search').addClass('search-margin')
      $('.genre').show()
      $('#genre_2').hide()
    },
    getData:function () {
      var self = this;
      $.ajax({
        type:'get',
        url:`${ self.$store.state.domain }/article/hotWords`,
        beforeSend: function (request) {  
          // 传token
           request.setRequestHeader("Authorization", self.$store.state.user.token);
        },
        success:function (data) {
          self.hotWords = data.list
          setTimeout(() => {
            $('#wordCloud').show()
            wordCloud()
          }, 100);
        },
        error: function (data) {  
          if (data.responseJSON.message) {
            self.$notify({
              title: 'warning',
              message:data.responseJSON.message,
              type: 'warning'
            });
            self.$store.commit('logout')
          }
        }
      })
    },
    hot_click:function (hotword,event) { 
      // 触发一下该input的input事件，v-model 只不过是个语法糖，底层还是监听的input事件
      $('#search_input').val(event.currentTarget.text)
      document.getElementById('search_input').dispatchEvent(new Event('input'))
      this.$router.push({
          path: "/searchList",
          name: 'searchList',
          params: {
            keyword: event.currentTarget.text,
            classify:'SCDB',
            sort_value: 1,
            url:'http://seekerservice.usts.top/api/article/hotWordArticles?hotword='+hotword
          }
      });
      // $('#search_btn').trigger('click')
    }
  },
  created: function () {
    
  },
  mounted: function () {
    // 初始化样式
    this.initStyle()
    // 获取热词
    this.getData()
    
  },
  destroyed: function () {
    $('.start-search').removeClass('search-margin')
  }
};
</script>

<style>
body {
  overflow: hidden;
}
#wordCloud {
  position: relative;
  width: 450px;
  height: 450px;
  margin: 0 auto;
  top: 250px;
  display: none;
  z-index: 1;
}
#wordCloud a {
  position: absolute;
  top: 0px;
  left: 0px;
  font-family: Microsoft YaHei;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: 3px 6px;
}
#wordCloud a:hover {
  background: rgba(146, 145, 145,0.7);
  cursor: pointer;
}
#wordCloud .blue {
  color: blue;
}
#wordCloud .red {
  color: red;
}
#wordCloud .yellow {
  color: yellow;
}
#wordCloud-mobile {
  display: none;
}
.search-margin {
  margin-top: 0 !important;
}

/*媒体查询适配移动端*/
@media screen and (max-width: 700px) {
    #wordCloud {
      top: 200px;
      left: -40px;
      display: none !important;
    }
    #wordCloud-mobile {
      display: block;
      position: relative;
      top: 43vh;
      /* margin-top: 20px; */
    }
    #wordCloud-mobile a {
      display: inline-block;
      margin: 10px;
      /* margin-top: 0; */
      color: white;
    }
}
</style>
